<template>
  <div class="home">
    <div class="hero-section">
      <h1>欢迎来到宠物商城</h1>
      <p>为您的爱宠提供优质商品和服务</p>
    </div>

    <div class="filter-section"> <!-- 筛选区域，包含宠物类型和商品分类筛选 -->
      <div class="pet-filter"><!-- 宠物类型筛选 -->
         <!-- 全部宠物类型按钮 -->
        <button 
          :class="['filter-btn', selectedPet === 'all' ? 'active' : '']"
          @click="selectedPet = 'all'"
        >
          全部
        </button>
         <!-- 猫咪专区按钮 -->
        <button 
          :class="['filter-btn', selectedPet === 'cat' ? 'active' : '']"
          @click="selectedPet = 'cat'"
        >
          猫咪专区
        </button>
        <!-- 狗狗专区按钮 -->
        <button 
          :class="['filter-btn', selectedPet === 'dog' ? 'active' : '']"
          @click="selectedPet = 'dog'"
        >
          狗狗专区
        </button>
      </div>
       <!-- 商品分类筛选，仅在选择了特定宠物类型时显示 -->
      <div class="category-filter" v-if="selectedPet !== 'all'">
         <!-- 全部商品按钮 -->
        <button 
          :class="['filter-btn', selectedCategory === 'all' ? 'active' : '']"
          @click="selectedCategory = 'all'"
        >
          全部商品
        </button>
        <!-- 食品分类按钮，根据选择的宠物类型显示不同名称 -->
        <button 
          :class="['filter-btn', selectedCategory === 'food' ? 'active' : '']"
          @click="selectedCategory = 'food'"
        >
          {{ selectedPet === 'cat' ? '猫粮' : '狗粮' }}
        </button>
         <!-- 玩具分类按钮，根据选择的宠物类型显示不同名称 -->
        <button 
          :class="['filter-btn', selectedCategory === 'toy' ? 'active' : '']"
          @click="selectedCategory = 'toy'"
        >
          {{ selectedPet === 'cat' ? '猫玩具' : '狗玩具' }}
        </button>
        <button 
          :class="['filter-btn', selectedCategory === 'breed' ? 'active' : '']"
          @click="selectedCategory = 'breed'"
        >
          {{ selectedPet === 'cat' ? '猫咪品种' : '狗狗品种' }}
        </button>
      </div>
    </div>
     <!-- 商品展示网格 -->
    <div class="products-grid">
       <!-- 循环展示过滤后的商品 -->
      <div v-for="product in filteredProducts" :key="product.id" class="product-card">
         <!-- 商品图片区域 -->
        <div class="product-image">
          <!-- 显示商品图片 -->
          <img :src="product.image" :alt="product.name">
          <!-- 显示商品子分类标签 -->
          <div class="product-badge" v-if="product.subCategory">
            {{ getSubCategoryLabel(product.subCategory) }}
          </div>
        </div>
        <!-- 商品信息区域 -->
        <div class="product-info">
          <!-- 商品名称 -->
          <h3>{{ product.name }}</h3>
          <!-- 商品描述 -->
          <p class="description">{{ product.description }}</p>
          <!-- 价格和操作按钮区域 -->
          <div class="price-action">
            <!-- 商品价格 -->
            <span class="price">¥{{ product.price }}</span>
            <!-- 操作按钮区域 -->
            <div class="action-buttons">
              <!-- 详情按钮 -->
              <router-link 
                :to="'/product/' + product.id" 
                class="detail-btn"
              >
                查看详情
              </router-link>
              <button 
                class="add-to-cart" 
                @click="addToCart(product)"
                :disabled="!isLoggedIn"
                :title="!isLoggedIn ? '请先登录' : ''"
              >
                加入购物车
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import products from '../products'

export default {
  name: 'Home',
  setup() {
     // 定义响应式变量，用于存储当前选择的宠物类型，初始值为 'all'
    const selectedPet = ref('all')
    // 定义响应式变量，用于存储当前选择的商品分类，初始值为 'all'
    const selectedCategory = ref('all')
    // 定义响应式变量，用于判断用户是否已登录，从 localStorage 中获取登录状态
    const isLoggedIn = ref(localStorage.getItem('isLoggedIn') === 'true')
    // 计算属性，根据选择的宠物类型和商品分类过滤商品列表
    const filteredProducts = computed(() => {
      let filtered = [...products]// 复制原始商品列表
      // 如果选择的宠物类型不是 'all'，则过滤出对应宠物类型的商品
      if (selectedPet.value !== 'all') {
        filtered = filtered.filter(p => p.petType === selectedPet.value)
      }
      // 如果选择的商品分类不是 'all'，则过滤出对应商品分类的商品
      if (selectedCategory.value !== 'all') {
        filtered = filtered.filter(p => p.productType === selectedCategory.value)
      }
      // 返回过滤后的商品列表
      return filtered
    })
    // 函数，用于根据子分类获取对应的标签
    const getSubCategoryLabel = (subCategory) => {
      // 定义子分类标签映射表
      const labels = {
        'kitten': '幼猫',
        'adult': '成年',
        'senior': '老年',
        'activity': '活动',
        'interactive': '互动',
        'catnip': '猫薄荷',
        'puppy': '幼犬',
        'chew': '咀嚼',
        'training': '训练',
        'purebred': '纯种'
      }
       // 返回对应子分类的标签，如果不存在则返回原始子分类名称
      return labels[subCategory] || subCategory
    }
    // 函数，用于将商品添加到购物车
    const addToCart = (product) => {
       // 如果用户未登录，弹出提示并返回
      if (!isLoggedIn.value) {
        alert('请先登录！')
        return
      }
      // 从 localStorage 中获取购物车数据，如果不存在则初始化为空数组
      const cart = JSON.parse(localStorage.getItem('cart') || '[]')
      // 查找购物车中是否已存在该商品
      const existingItem = cart.find(item => item.id === product.id)
      // 如果已存在该商品，则增加其数量
      if (existingItem) {
        existingItem.quantity++
      } else {
        // 如果不存在，则将该商品添加到购物车，并设置数量为 1
        cart.push({ ...product, quantity: 1 })
      }
      // 将更新后的购物车数据存储到 localStorage 中
      localStorage.setItem('cart', JSON.stringify(cart))
      // 触发 storage 事件，通知其他组件购物车数据已更新
      window.dispatchEvent(new Event('storage'))
      // 弹出提示，告知用户商品已添加到购物车
      alert('已添加到购物车！')
    }
    // 返回需要在模板中使用的变量和函数
    return {
      selectedPet,
      selectedCategory,
      filteredProducts,
      getSubCategoryLabel,
      addToCart,
      isLoggedIn
    }
  }
}
</script>

<style scoped>
/* 页面容器样式 */
.home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
/* 英雄区域样式 */
.hero-section {
  text-align: center;
  padding: 40px 20px;
   /* 渐变背景色 */
  background: linear-gradient(135deg, #B784B7 0%, #9B6B9B 100%);
  color: white;
  border-radius: 10px;
  margin-bottom: 30px;
}
/* 英雄区域标题样式 */
.hero-section h1 {
  font-size: 2.5em;
  margin-bottom: 10px;
}
/* 英雄区域副标题样式 */
.hero-section p {
  font-size: 1.2em;
  opacity: 0.9;
}
/* 筛选区域样式 */
.filter-section {
  margin-bottom: 30px;
}
/* 宠物类型和商品分类筛选按钮容器样式 */
.pet-filter, .category-filter {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 15px;
}
/* 筛选按钮样式 */
.filter-btn {
  padding: 10px 20px;
  border: 2px solid #4CAF50;  /* 边框为 2px 绿色实线 */
  border-radius: 25px;
  background: white;
  color: #4CAF50;
  cursor: pointer;  /* 鼠标指针样式为手型 */
  transition: all 0.3s ease; /* 过渡效果，所有属性变化在 0.3 秒内完成 */
  font-size: 1em;  /* 字体大小为 1em */
}
/* 筛选按钮悬停样式 */
.filter-btn:hover {
  background: #4CAF50; /* 背景色变为绿色 */
  color: white;  /* 文字颜色变为白色 */
}
/* 筛选按钮激活样式 */
.filter-btn.active {
  background: #4CAF50;
  color: white;
}
/* 商品展示网格样式 */
.products-grid {
  display: grid;  /* 网格布局 */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));  /* 自动填充列，最小宽度为 280px，最大宽度为 1fr */
  gap: 30px;  /* 网格元素之间的间距为 30px */
  padding: 20px 0;
}
/* 商品卡片样式 */
.product-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* 溢出隐藏 */
  transition: transform 0.3s ease; /* 过渡效果，所有属性变化在 0.3 秒内完成 */
}
/* 商品卡片悬停样式 */
.product-card:hover {
  transform: translateY(-5px);
}
/* 商品图片区域样式 */
.product-image {
  position: relative;
  height: 240px;
  overflow: hidden; /* 溢出隐藏 */
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
/* 商品图片样式 */
.product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持纵横比并填充容器 */
   /* 过渡效果，所有属性变化在 0.3 秒内完成 */
  transition: transform 0.3s ease;
}
/* 商品卡片悬停时图片样式 */
.product-card:hover .product-image img {
  transform: scale(1.05);  /* 放大 1.05 倍 */
}
/* 商品子分类标签样式 */
.product-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #4CAF50;
  color: white;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 0.8em;
}
/* 商品信息区域样式 */
.product-info {
  padding: 20px;
}
/* 商品名称样式 */
.product-info h3 {
  margin: 0 0 10px 0;
  font-size: 1.2em;
  color: #333;
}
/* 商品描述样式 */
.description {
  color: #666;
  font-size: 0.9em;
  margin-bottom: 15px;
  height: 40px;
  overflow: hidden;
  display: -webkit-box;/* 显示为 -webkit-box */
  -webkit-line-clamp: 2;/* 最多显示 2 行 */
  -webkit-box-orient: vertical;
}
/* 价格和操作按钮区域样式 */
.price-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 商品价格样式 */
.price {
  font-size: 1.3em;
  font-weight: bold;
  color: #4CAF50;
}
/* 操作按钮区域样式 */
.action-buttons {
  display: flex;
  gap: 10px;
}
/* 详情按钮样式 */
.detail-btn {
  background: #B784B7;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-decoration: none; /* 去除下划线 */
  font-size: 14px;
}
/* 详情按钮悬停样式 */
.detail-btn:hover {
  background: #9B6B9B;
}
/* 添加到购物车按钮样式 */
.add-to-cart {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 14px;
}
/* 添加到购物车按钮悬停样式（未禁用状态） */
.add-to-cart:hover:not(:disabled) {
  background: #45a049;
}
/* 添加到购物车按钮禁用样式 */
.add-to-cart:disabled {
  background: #ccc;
  cursor: not-allowed;
}
/* 媒体查询，当屏幕宽度小于等于 768px 时的样式 */
@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
  }
  /* 英雄区域样式 */
  .hero-section {
    padding: 30px 15px;
  }

  .hero-section h1 {
    font-size: 2em;
  }
 /* 筛选区域样式 */
  .filter-section {
    flex-direction: column;
  }
  /* 宠物类型和商品分类筛选按钮容器样式 */
  .pet-filter, .category-filter {
    flex-wrap: wrap;
  }
}
</style>